<script setup lang="tsx">
import { onMounted, ref } from "vue";
import { Icon } from '@iconify/vue'
import { getIconData } from '@iconify/utils'

const collections = ref<Array<{ prefix: string, name: string }>>([])
const selectedCollection = ref<string>('')
const iconsInCollection = ref<string[]>([])
const iconPreviewSize = 24 // Size for preview icons

onMounted(() => {
  try {
    // Define available icon collections explicitly
    // This approach works in browsers as we're not trying to scan file systems
    collections.value = [
      { prefix: 'ph', name: 'Phosphor Icons' },
      { prefix: 'line-md', name: 'Line Material Design' },
      { prefix: 'tdesign', name: 'TDesign Icons' },
      { prefix: 'mdi', name: 'Material Design Icons' },
      { prefix: 'lucide', name: 'Lucide Icons' },
      { prefix: 'carbon', name: 'Carbon Icons' },
      { prefix: 'ri', name: 'Remix Icons' },
      { prefix: 'ant-design', name: 'Ant Design Icons' },
      { prefix: 'ion', name: 'Ionicons' },
      { prefix: 'ep', name: 'Element Plus Icons' },
      { prefix: 'bi', name: 'Bootstrap Icons' },
      { prefix: 'fe', name: 'Feather Icons' },
      { prefix: 'heroicons', name: 'Heroicons' },
      { prefix: 'tabler', name: 'Tabler Icons' },
      { prefix: 'simple-icons', name: 'Simple Icons' }
    ]
    
    console.log('Available icon collections:', collections.value)
    
    // Test if an icon exists using browser-compatible API
    const testIcon = getIconData('ph:article')
    console.log('Test icon data exists:', testIcon !== undefined)
    
  } catch (error) {
    console.error('Error initializing icon collections:', error)
  }
})

// Function to load icons in a selected collection - now browser-compatible
const loadIconsInCollection = (prefix: string) => {
  selectedCollection.value = prefix
  
  try {
    // Define common icons for each collection
    // This is a browser-compatible approach
    const commonIconsByCollection: Record<string, string[]> = {
      'ph': ['article', 'home', 'settings', 'user', 'search', 'menu', 'x', 'plus', 'trash', 'edit', 'check', 'info', 'alert-circle', 'calendar', 'clock', 'bell', 'star', 'chevron-down'],
      'line-md': ['home', 'settings', 'user', 'search', 'menu', 'close', 'plus', 'trash', 'edit', 'dashboard', 'info', 'alert-circle', 'calendar', 'clock', 'bell', 'star', 'chevron-down'],
      'tdesign': ['file-icon', 'home', 'settings', 'user', 'search', 'menu', 'close', 'plus', 'trash', 'edit', 'info-circle', 'warning-circle', 'calendar', 'clock', 'bell', 'star', 'chevron-down'],
      'mdi': ['home', 'settings', 'user', 'search', 'menu', 'close', 'plus', 'trash-can', 'pencil', 'dashboard', 'information', 'alert-circle', 'calendar', 'clock', 'bell', 'star', 'chevron-down'],
      'lucide': ['home', 'settings', 'user', 'search', 'menu', 'x', 'plus', 'trash-2', 'edit', 'layout-dashboard', 'info', 'alert-circle', 'calendar', 'clock', 'bell', 'star', 'chevron-down'],
      'carbon': ['home', 'settings', 'user', 'search', 'menu', 'close', 'add', 'trash-can', 'edit', 'dashboard', 'information', 'warning', 'calendar', 'clock', 'notification', 'star', 'chevron-down'],
      'ri': ['home-2', 'settings-3', 'user-3', 'search-2', 'menu-2', 'close', 'add-circle', 'delete-bin-2', 'edit-2', 'dashboard', 'info-circle', 'warning-2', 'calendar', 'clock-3', 'bell-2', 'star', 'chevron-down']
    }
    
    // Get icons for the selected collection or use default icons
    iconsInCollection.value = commonIconsByCollection[prefix] || [
      'home', 'settings', 'user', 'search', 'menu', 'close', 'plus'
    ]
    
    console.log(`Icons in ${prefix}:`, iconsInCollection.value)
    
    // Verify some icons exist
    iconsInCollection.value.slice(0, 3).forEach(iconName => {
      const fullIconName = `${prefix}:${iconName}`
      const iconData = getIconData(fullIconName)
      console.log(`${fullIconName} exists:`, iconData !== undefined)
    })
    
  } catch (error) {
    console.error(`Error loading icons for collection ${prefix}:`, error)
    iconsInCollection.value = []
  }
}

// Helper function to check if an icon exists
const checkIconExists = (collection: string, icon: string): boolean => {
  try {
    return getIconData(`${collection}:${icon}`) !== undefined
  } catch {
    return false
  }
}
</script>
<template>
  <div class="p-4">
    <h2 class="text-xl font-bold mb-4">Icon Collections</h2>
    
    <!-- Collection Selection -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
      <div 
        v-for="item in collections" 
        :key="item.prefix" 
        class="border p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
        :class="{ 'border-green-500 bg-green-50': selectedCollection === item.prefix }"
        @click="loadIconsInCollection(item.prefix)"
      >
        <div class="flex items-center justify-between">
          <div class="font-medium">{{ item.prefix }}</div>
          <Icon 
            v-if="selectedCollection === item.prefix" 
            icon="ph:check" 
            class="text-green-500" 
            :width="18" 
            :height="18" 
          />
        </div>
        <div class="text-sm text-gray-600">{{ item.name }}</div>
      </div>
    </div>
    
    <!-- Icons Preview -->
    <div v-if="selectedCollection" class="mt-8">
      <h3 class="text-lg font-semibold mb-3">Icons in {{ selectedCollection }}</h3>
      <div class="flex flex-wrap gap-4 p-3 bg-gray-50 rounded-lg">
        <div 
          v-for="icon in iconsInCollection" 
          :key="icon" 
          class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:shadow-md transition-shadow"
        >
          <Icon 
            :icon="`${selectedCollection}:${icon}`" 
            class="text-gray-700" 
            :width="iconPreviewSize" 
            :height="iconPreviewSize" 
          />
          <div class="text-center">
            <div class="text-xs text-gray-500 font-mono">
              {{ selectedCollection }}:{{ icon }}
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Usage Help -->
    <div class="mt-8 p-4 bg-blue-50 rounded-lg border border-blue-100">
      <h4 class="font-medium text-blue-800 mb-2">How to use these icons</h4>
      <pre class="text-sm text-gray-700 bg-white p-2 rounded overflow-x-auto">
        {{ `<Icon icon="${selectedCollection || 'collection'}:${iconsInCollection[0] || 'icon'}" />` }}
      </pre>
      <p class="text-xs text-gray-600 mt-2">Make sure you're using the Icon component from '@iconify/vue'</p>
    </div>
  </div>
</template>
<style lang="less" scoped>
.icon-preview {
  transition: transform 0.2s ease;
}
.icon-preview:hover {
  transform: scale(1.1);
}
</style>